<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Products</title>
    <!-- Custom Theme files -->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    &lt;!&ndash; //Custom Theme files &ndash;&gt;
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
    <link href="css/form.css" rel="stylesheet" type="text/css" media="all"/>
    &lt;!&ndash; js &ndash;&gt;
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
    &lt;!&ndash; //js &ndash;&gt;
    &lt;!&ndash; cart &ndash;&gt;
    <script src="js/simpleCart.min.js"></script>-->
    <!-- cart -->
    <!-- the jScrollPane script -->
    <script type="text/javascript" src="../static/js/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" id="sourcecode">
        $(function () {
            $('.scroll-pane').jScrollPane();
        });
    </script>
    <!-- //the jScrollPane script -->
    <script type="text/javascript" src="../static/js/jquery.mousewheel.js"></script>
    <!-- the mousewheel plugin -->
</head>
<body>
<!--header-->
<!--<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a href="index.html">心语蛋糕</a></h1>
            </div>
            &lt;!&ndash;navbar-header&ndash;&gt;
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="index.html" class="active">主页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">生日<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">婚礼<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">特别优惠 <b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-4">
                            <div class="row">
                                <div class="col-sm-3">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>主题</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">心形</a></li>
                                        <li><a class="list" href="products.html">卡通</a></li>
                                        <li><a class="list" href="products.html">2-3层蛋糕</a></li>
                                        <li><a class="list" href="products.html">方形</a></li>
                                        <li><a class="list" href="products.html">圆形</a></li>
                                        <li><a class="list" href="products.html">照片蛋糕</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>重量</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">1 kG</a></li>
                                        <li><a class="list" href="products.html">1.5 kG</a></li>
                                        <li><a class="list" href="products.html">2 kG</a></li>
                                        <li><a class="list" href="products.html">3 kG</a></li>
                                        <li><a class="list" href="products.html">4 kG</a></li>
                                        <li><a class="list" href="products.html">更大</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">商店<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-3">
                            <div class="row">
                                <div class="col-sm-4">
                                    <h4>关系</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">朋友</a></li>
                                        <li><a class="list" href="products.html">爱人</a></li>
                                        <li><a class="list" href="products.html">姐妹</a></li>
                                        <li><a class="list" href="products.html">兄弟</a></li>
                                        <li><a class="list" href="products.html">孩子</a></li>
                                        <li><a class="list" href="products.html">父母</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-3">
                                    <h4>口味</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">巧克力</a></li>
                                        <li><a class="list" href="products.html">混合水果</a></li>
                                        <li><a class="list" href="products.html">奶油</a></li>
                                        <li><a class="list" href="products.html">草莓</a></li>
                                        <li><a class="list" href="products.html">香草</a></li>
                                        <li><a class="list" href="products.html">慕斯</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <h4>特色</h4>
                                    <ul class="multi-column-dropdown">
                                        <li><a class="list" href="products.html">冰淇淋蛋糕</a></li>
                                        <li><a class="list" href="products.html">瑞士卷</a></li>
                                        <li><a class="list" href="products.html">拉斯克·卡普</a></li>
                                        <li><a class="list" href="products.html">纸杯蛋糕</a></li>
                                        <li><a class="list" href="products.html">松饼</a></li>
                                        <li><a class="list" href="products.html">梅尔韦勒</a></li>
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </li>
                </ul>
                &lt;!&ndash;/.navbar-collapse&ndash;&gt;
            </div>
            &lt;!&ndash;//navbar-header&ndash;&gt;
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form">
                        <input type="text" class="form-control">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                            查找
                        </button>
                    </form>
                </div>
            </div>
            <div class="header-right login">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <div id="loginBox">
                    <form id="loginForm">
                        <fieldset id="body">
                            <fieldset>
                                <label for="email">邮箱地址</label>
                                <input type="text" name="email" id="email">
                            </fieldset>
                            <fieldset>
                                <label for="password">密码</label>
                                <input type="password" name="password" id="password">
                            </fieldset>
                            <input type="submit" id="login" value="Sign in">
                            <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i><i><font color='red'>&nbsp;&nbsp;密码错误，请重新输入</font></i></label>
                        </fieldset>
                        <p>新的用户 ? <a class="sign" href="account.html">注册</a> <span><a href="#">忘记密码?</a></span></p>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                <div class="cart-box">
                    <h4><a href="checkout.html">
                        <span class="simpleCart_total"> ￥0.00 </span> (<span id="simpleCart_quantity"
                                                                             class="simpleCart_quantity"> 0 </span>)
                    </a></h4>
                    <p><a href="javascript:;" class="simpleCart_empty">清空购物车</a></p>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>-->
<!--//header-->

<!--products-->
<div class="products">
    <div class="container">
        <h2>我们的产品</h2>
        <div class="col-md-9 product-model-sec">
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m1.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button>查看</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m2.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button>查看</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m3.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> 查看</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>			 -->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m4.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> 查看</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>	 -->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m5.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> 查看</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>	 -->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m6.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> View</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m7.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> View</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m8.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> View</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../static/images/m9.png" class="img-responsive" alt=""/>
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">
                                <button> View</button>
                            </h4>
                        </div>
                    </div>
                </a>
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <!-- <h4>Product #1</h4>-->
                        <span class="item_price">￥200.00</span>
                        <div class="ofr">
                            <p class="pric1">
                                <del>￥230.00</del>
                            </p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1"/>
                        <input type="button" class="item_add items" value="添加">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 rsidebar span_1_of_left">
            <section class="sky-form">
                <div class="product_right">
                    <h4 class="m_2"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>类别</h4>
                    <div class="tab1">
                        <ul class="place">
                            <li class="sort">普通蛋糕</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="single-bottom">
                            <a href="#"><p>木薯</p></a>
                            <a href="#"><p>芝士蛋糕</p></a>
                            <a href="#"><p>椰子饼</p></a>
                            <a href="#"><p>纸杯蛋糕</p></a>
                        </div>
                    </div>
                    <div class="tab2">
                        <ul class="place">
                            <li class="sort">特色蛋糕</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="single-bottom">
                            <a href="#"><p>美味的蛋糕</p></a>
                            <a href="#"><p>姜饼</p></a>
                        </div>
                    </div>
                    <div class="tab3">
                        <ul class="place">
                            <li class="sort">无蛋蛋糕</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="single-bottom">
                            <a href="#"><p>牛奶蛋糕</p></a>
                            <a href="#"><p>水果蛋糕</p></a>
                        </div>
                    </div>
                    <div class="tab4">
                        <ul class="place">
                            <li class="sort">2-3 层蛋糕</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="single-bottom">
                            <a href="#"><p>扭曲4层</p></a>
                            <a href="#"><p>花层</p></a>
                            <a href="#"><p>双心形</p></a>
                        </div>
                    </div>
                    <!--script-->
                    <script>
                        $(document).ready(function () {
                            $(".tab1 .single-bottom").hide();
                            $(".tab2 .single-bottom").hide();
                            $(".tab3 .single-bottom").hide();
                            $(".tab4 .single-bottom").hide();
                            $(".tab5 .single-bottom").hide();

                            $(".tab1 ul").click(function () {
                                $(".tab1 .single-bottom").slideToggle(300);
                                $(".tab2 .single-bottom").hide();
                                $(".tab3 .single-bottom").hide();
                                $(".tab4 .single-bottom").hide();
                                $(".tab5 .single-bottom").hide();
                            })
                            $(".tab2 ul").click(function () {
                                $(".tab2 .single-bottom").slideToggle(300);
                                $(".tab1 .single-bottom").hide();
                                $(".tab3 .single-bottom").hide();
                                $(".tab4 .single-bottom").hide();
                                $(".tab5 .single-bottom").hide();
                            })
                            $(".tab3 ul").click(function () {
                                $(".tab3 .single-bottom").slideToggle(300);
                                $(".tab4 .single-bottom").hide();
                                $(".tab5 .single-bottom").hide();
                                $(".tab2 .single-bottom").hide();
                                $(".tab1 .single-bottom").hide();
                            })
                            $(".tab4 ul").click(function () {
                                $(".tab4 .single-bottom").slideToggle(300);
                                $(".tab5 .single-bottom").hide();
                                $(".tab3 .single-bottom").hide();
                                $(".tab2 .single-bottom").hide();
                                $(".tab1 .single-bottom").hide();
                            })
                            $(".tab5 ul").click(function () {
                                $(".tab5 .single-bottom").slideToggle(300);
                                $(".tab4 .single-bottom").hide();
                                $(".tab3 .single-bottom").hide();
                                $(".tab2 .single-bottom").hide();
                                $(".tab1 .single-bottom").hide();
                            })
                        });
                    </script>
                    <!--//script -->
                </div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>折扣</h4>
                <div class="row row1 scroll-pane">
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>upto- 10% (20)</label>
                    </div>
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>70% - 60% (5)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>50% - 40% (7)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (2)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (5)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (7)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (2)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>其他(50)</label>
                    </div>
                </div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>价格</h4>
                <ul class="dropdown-menu1">
                    <li><a href="">
                        <div id="slider-range"></div>
                        <input type="text" id="amount"
                               style="border: 0; font-weight: NORMAL;   font-family: 'Dosis-Regular';"/>
                    </a></li>
                </ul>
            </section>
            <!---->
            <script type="text/javascript" src="../static/js/jquery-ui.min.js"></script>
            <link rel="stylesheet" type="text/css" href="../static/css/jquery-ui.css">
            <script type='text/javascript'>//<![CDATA[
            $(window).load(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 1000,
                    values: [10, 1000],
                    slide: function (event, ui) {
                        $("#amount").val("￥" + ui.values[0] + " - ￥" + ui.values[1]);
                    }
                });
                $("#amount").val("￥" + $("#slider-range").slider("values", 0) + " - ￥" + $("#slider-range").slider("values", 1));

            });//]]>
            </script>
            <!---->
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>口味</h4>
                <div class="row row1 scroll-pane">
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>香草</label>
                    </div>
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>巧克力</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>奶油</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>草莓</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>黑森林</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>混合水果</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>慕斯</label>
                    </div>
                </div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>重量</h4>
                <div class="row row1 scroll-pane">
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>0.5 KG</label>
                    </div>
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>1 KG</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>2 KG</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>更多</label>
                    </div>
                </div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>颜色</h4>
                <div class="row row1 scroll-pane">
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>白色</label>
                    </div>
                    <div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>粉色</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>金色</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>银色</label>
                    </div>
                </div>
            </section>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!--//products-->

<!--footer-->
<!--<div class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>公司</h4>
                <ul>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">事件</a></li>
                    <li><a href="#">经销商定位器</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>服务</h4>
                <ul>
                    <li><a href="#">支持</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">担保</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>订单和退货</h4>
                <ul>
                    <li><a href="#">订单状态</a></li>
                    <li><a href="#">运输政策</a></li>
                    <li><a href="#">退货政策</a></li>
                    <li><a href="#">数字礼品卡</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>合法的</h4>
                <ul>
                    <li><a href="#">隐私</a></li>
                    <li><a href="#">条款和条件</a></li>
                    <li><a href="#">社会责任</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid icons">
                <h4>联系我们</h4>
                <ul>
                    <li><a href="#"><img src="images/wx.png" alt=""/>微信</a></li>
                    <li><a href="#"><img src="images/qq.png" alt=""/>QQ</a></li>
                    <li><a href="#"><img src="images/email.png" alt=""/>邮箱</a></li>
                    <li><a href="#"><img src="images/tel.png" alt=""/>电话</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div></div>-->
<!--//footer-->

<!--<div class="footer-bottom">
    <div class="container">
        <p><img src="images/警网.png"/> 京公网安备 1101080202128 号 &emsp;&emsp;@ 2020.12.Company name All rights reserved.
            &emsp;&emsp; <a
                    href="http://localhost:8888/%E7%94%9F%E6%97%A5%E8%9B%8B%E7%B3%95%E5%BA%97%E7%BD%91%E7%AB%99/single.html">心语蛋糕店</a>
        </p>
    </div>
</div>-->
</body>
</html>